<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0,maximun-scale=1.0,user-scalable=0">
  <meta name="keywords" content="">
  <meta name="description" content="">
  <link rel="stylesheet" href="css/base.css">
  <link rel="stylesheet" href="css/common.css">
  <link rel="stylesheet" href="css/sale.css">
  <link rel="stylesheet" href="css/itemSelect.css">
  <title>商品选择</title>
</head>

<body>
  <div class="container">
    <!-- 头部 -->
    <header>
      <div class="header">
        <a class="back" href="index.html"></a>
        <span>限时抢购</span>
        <a class="forward" href="#"><img src="images/newsale/forward.png" alt=""></a>
      </div>
    </header>
    <section>
      <div class="main">
        <!-- 正在进行抢购 -->
        <div class="ing">
          <img src="images/sale/qiang1.png" alt="">
          <ul>
            <li class="clearfix">
              <img class="fl" src="images/sale/img01.png" alt="">
              <div class="fl right">
                <h3 class="title">女装外套某宝同款友情回馈价格仅限3天，售完即止。</h3>
                <div class="alreadysale clearfix">
                  <div class="bar fl">
                    <div class="bar_inner">92%</div>
                  </div>
                  <span class="fl">已抢245件</span>
                </div>
                <div class="li_bottom clearfix">
                  <p class="price fl">
                    ￥20.0 <del>￥20</del>
                  </p>
                  <div class="qiang fl">
                    马上
                    <div>抢</div>
                  </div>
                </div>
              </div>
            </li>
            <li class="clearfix">
              <img class="fl" src="images/sale/img02.png" alt="">
              <div class="fl right">
                <h3 class="title">英伦复古风格泡泡裙，仅限优雅淑女风范。</h3>
                <div class="alreadysale clearfix">
                  <div class="bar fl">
                    <div class="bar_inner">92%</div>
                  </div>
                  <span class="fl">已抢245件</span>
                </div>
                <div class="li_bottom clearfix">
                  <p class="price fl">
                    ￥20.0 <del>￥20</del>
                  </p>
                  <div class="qiang fl">
                    马上
                    <div>抢</div>
                  </div>
                </div>
              </div>
            </li>
            <li class="clearfix">
              <img class="fl" src="images/sale/img03.png" alt="">
              <div class="fl right">
                <h3 class="title">欧洲流程款式风衣，大气华贵气质彰显，光彩夺目</h3>
                <div class="alreadysale clearfix hidden">
                  <div class="bar fl ">
                    <div class="bar_inner">92%</div>
                  </div>
                  <span class="fl">已抢245件</span>
                </div>
                <div class="saleout">
                  1200件商品已被抢光，下次早点来哦
                </div>
                <div class="li_bottom clearfix">
                  <p class="price fl">
                    ￥20.0 <del>￥20</del>
                  </p>
                  <div class="qiang fl" style="background-color: #b3b3b3;">
                    马上
                    <div style="background-color: #b3b3b3;border-color: #d9d9d9;">抢</div>
                  </div>
                </div>
              </div>
            </li>
          </ul>
        </div>
        <!-- 即将进行抢购 -->
        <div class="soonsale ing">
          <h4>查看更多已告罄商品 ></h4>
          <img src="images/sale/qiang2.png" alt="">
          <ul>
            <li class="clearfix">
              <img class="fl" src="images/sale/img04.png" alt="">
              <div class="fl right">
                <h3 class="title">欧洲流程款式风衣，大气华贵气质彰显，光彩夺目</h3>
                <div class="alreadysale clearfix hidden">
                  <div class="bar fl ">
                    <div class="bar_inner">92%</div>
                  </div>
                  <span class="fl">已抢245件</span>
                </div>
                <div class="saleout">
                  抢购即将开始
                </div>
                <div class="li_bottom clearfix">
                  <p class="price fl">
                    ￥20.0 <del>￥20</del>
                  </p>
                  <div class="qiang fl" style="background-color: #b3b3b3;">
                    马上
                    <div style="background-color: #b3b3b3;border-color: #d9d9d9;">抢</div>
                  </div>
                </div>
              </div>
            </li>
            <li class="clearfix">
              <img class="fl" src="images/sale/img01.png" alt="">
              <div class="fl right">
                <h3 class="title">欧洲流程款式风衣，大气华贵气质彰显，光彩夺目</h3>
                <div class="alreadysale clearfix hidden">
                  <div class="bar fl ">
                    <div class="bar_inner">92%</div>
                  </div>
                  <span class="fl">已抢245件</span>
                </div>
                <div class="saleout">
                  抢购即将开始
                </div>
                <div class="li_bottom clearfix">
                  <p class="price fl">
                    ￥20.0 <del>￥20</del>
                  </p>
                  <div class="qiang fl" style="background-color: #b3b3b3;">
                    马上
                    <div style="background-color: #b3b3b3;border-color: #d9d9d9;">抢</div>
                  </div>
                </div>
              </div>
            </li>
            <li class="clearfix">
              <img class="fl" src="images/sale/img02.png" alt="">
              <div class="fl right">
                <h3 class="title">欧洲流程款式风衣，大气华贵气质彰显，光彩夺目</h3>
                <div class="alreadysale clearfix hidden">
                  <div class="bar fl ">
                    <div class="bar_inner">92%</div>
                  </div>
                  <span class="fl">已抢245件</span>
                </div>
                <div class="saleout">
                  抢购即将开始
                </div>
                <div class="li_bottom clearfix">
                  <p class="price fl">
                    ￥20.0 <del>￥20</del>
                  </p>
                  <div class="qiang fl" style="background-color: #b3b3b3;">
                    马上
                    <div style="background-color: #b3b3b3;border-color: #d9d9d9;">抢</div>
                  </div>
                </div>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </section>
    <!-- 返回顶部 -->
    <section>
      <a href="#">
        <div class="backTop">
          回顶部
        </div>
      </a>
    </section>
    <div class="cover"></div>
    <div class="selectInfo">
      <div class="shopInfo">
        <img src="images/itemSelect/img01.png" alt="">
        <div class="right">
          <p class="title">绯红女巫爆款礼服，来自复仇者联盟电影</p>
          <p class="price">￥145</p>
          <p class="desc">请选择颜色 尺码</p>
        </div>
        <a href="sale.html" class="close">×</a>
      </div>
      <div class="colorInfo commonInfo">
        <div class="t">颜色</div>
        <ul>
          <li>米白色</li>
          <li>粉色</li>
          <li>红色</li>
          <li>黑色</li>
        </ul>
      </div>
      <div class="styleInfo commonInfo">
        <div class="t">款式</div>
        <ul>
          <li>长款</li>
          <li>宽松款</li>
          <li>加厚版</li>
          <li>升级版</li>
        </ul>
      </div>
      <div class="num">
        <p>购买数量</p>
        <ul>
          <li>-</li>
          <li>1</li>
          <li>+</li>
        </ul>
      </div>
      <a href="confirm.html" class="button">确认</a>
    </div>
  </div>
</body>

</html>